<template>
  <div class="dashboard-editor-container">
    <!-- <div class="dashboard-text">name:{{name}}</div> -->
    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
    <!-- <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div> -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <transaction-table></transaction-table>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import TransactionTable from './components/TransactionTable'
import { takeInvigilatexpTeachers, takeInvigilateypTeachers, takeInvigilatexwTeachers } from '@/api/dashboard'
const lineChartData = {
  xpTeachers: {
    Data: [],
    xAxisData: []
    // Data: [100, 120, 161, 134, 105, 160, 165],
    // xAxisData: ['201807', '201806', '201805', '201804', '201803', '201802', '201801']
  },
  ypTeachers: {
    Data: [],
    xAxisData: []
  },
  xwTeachers: {
    Data: [],
    xAxisData: []
  },
  students: {
    Data: [],
    xAxisData: []
  }
}
export default {
  name: 'dashboard-admin',
  components: {
    PanelGroup,
    LineChart,
    TransactionTable
  },
  data() {
    return {
      lineChartData: lineChartData.xpTeachers
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted: function() {
    takeInvigilatexpTeachers().then(response => {
      lineChartData.xpTeachers.Data = []
      lineChartData.xpTeachers.xAxisData = []
      for (let i = 0; i < response.result.length; i++) {
        lineChartData.xpTeachers.Data.push(response.result[i].TEACHERS)
        lineChartData.xpTeachers.xAxisData.push(response.result[i].MONTH_ID)
      }
    }).catch(error => {
      console.log(error)
      this.$message.error('获取校聘教师监考人次失败')
    })
    takeInvigilateypTeachers().then(response => {
      lineChartData.ypTeachers.Data = []
      lineChartData.ypTeachers.xAxisData = []
      for (let i = 0; i < response.result.length; i++) {
        lineChartData.ypTeachers.Data.push(response.result[i].TEACHERS)
        lineChartData.ypTeachers.xAxisData.push(response.result[i].MONTH_ID)
      }
    }).catch(error => {
      console.log(error)
      this.$message.error('获取校聘教师监考人次失败')
    })
    takeInvigilatexwTeachers().then(response => {
      lineChartData.xwTeachers.Data = []
      lineChartData.xwTeachers.xAxisData = []
      for (let i = 0; i < response.result.length; i++) {
        lineChartData.xwTeachers.Data.push(response.result[i].TEACHERS)
        lineChartData.xwTeachers.xAxisData.push(response.result[i].MONTH_ID)
      }
    }).catch(error => {
      console.log(error)
      this.$message.error('获取校聘教师监考人次失败')
    })
    // takeEaxminationStudents().then(response => {
    //   lineChartData.students.Data = []
    //   lineChartData.students.xAxisData = []
    //   for (let i = 0; i < response.result.length; i++) {
    //     lineChartData.students.Data.push(response.result[i].STUDENTS)
    //     lineChartData.students.xAxisData.push(response.result[i].MONTH_ID)
    //   }
    // }).catch(error => {
    //   console.log(error)
    //   this.$message.error('获取校聘教师监考人次失败')
    // })
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
